<!doctype html>
<html>
<head>
    <!doctype html>
    <html>
    <head>
        <!--
            访问地址：https://paycloud.vip

        -->
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>旅游数据大屏总览</title>
        <!--大屏-->
        <link type="text/css" href="css/public.css" rel="stylesheet">
        <link type="text/css" href="css/icon.css" rel="stylesheet">
        <link rel="stylesheet" href="css/overview.css" type="text/css">
        <script type="text/javascript">
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 768 * 100 + 'px';
        </script>

        <script src="js/echarts.min.js"></script>
    </head>
    <style>
        .abc {

        }

    </style>

<body>
<div class="bg">
    <div class="title">数据总览</div>
    <div class="leftMain">
        <div class="leftMain_top">
            <div class="leftMain_topIn">
                <ul>
                    <li>
                        <div class="liIn">
                            <h3>游客增长百分比</h3>
                            <p class="shu"><span class="shu1">12.69</span><i>%</i></p>
                            <div class="zi"><span
                                    class="span1">中南地区： 大幅增长 11%</span><span>华北地区：平稳不变</span></div>
                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </li>
                    <li>
                        <div class="liIn">
                            <h3>景区总热度上升</h3>
                            <p class="shu"><span class="shu2">32.24</span><i>w</i></p>
                            <div class="zi"><span
                                    class="span1">旅游热题：#抖音团购春游</span><span>旅游热地：云南丽江</span></div>
                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </li>
                    <li>
                        <div class="liIn">
                            <h3>旅游文化节热度</h3>
                            <p class="shu"><span class="shu3">543.31</span><i>w</i></p>
                            <div class="zi"><span class="span1">文化节：西班牙文化旅游年</span><span>详情：<a
                                    href="http://www.gov.cn/xinwen/2023-03/28/content_5748869.htm"/>马德里开幕</a></span>
                            </div>
                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </li>
                    <li>
                        <div class="liIn">
                            <h3>近十年营业额增长</h3>
                            <p class="shu"><span class="shu4">105.9</span><i>%</i></p>
                            <div class="zi"><span class="span1">资料来源：<a
                                    href="https://sjfw.mct.gov.cn/site/dataservice/details?id=28195"/>文化旅游局官网</a></span><span>近年消费额：2599 亿元</span>
                            </div>
                            <span class="border_bg_leftTop"></span>
                            <span class="border_bg_rightTop"></span>
                            <span class="border_bg_leftBottom"></span>
                            <span class="border_bg_rightBottom"></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="leftMain_middle">
            <div class="leftMain_middle_left">
                <div class="leftMain_middle_leftIn">
                    <h3>去年旅游人次量</h3>
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div class="biaoge" style="width:100%; height:25vh" id="chartmain"></div>
                    <script type="text/javascript">
                        //window.onload = function () {
                        //指定图表的配置项和数据
                        var dataAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
                        var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149];
                        var yMax = 500;
                        var dataShadow = [];

                        for (var i = 0; i < data.length; i++) {
                            dataShadow.push(yMax);
                        }

                        option = {
                            title: {
                                text: '',
                                subtext: ''
                            },
                            grid: {
                                x: 40,
                                y: 40,
                                x2: 20,
                                y2: 20,

                            },
                            xAxis: {
                                data: dataAxis,
                                axisLabel: {
                                    /*inside: true,*/
                                    interval: 0,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12

                                    }
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    symbol: ['none', 'arrow'],
                                    symbolOffset: 12,
                                    lineStyle: {
                                        color: '#fff',
                                    }
                                },
                                z: 10
                            },
                            yAxis: {
                                type: 'value',
                                name: '单位：万次',
                                axisLine: {
                                    show: true,
                                    symbol: ['none', 'arrow'],
                                    symbolOffset: 12,
                                    lineStyle: {
                                        color: '#fff',
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12
                                    }
                                }
                            },

                            dataZoom: [
                                {
                                    type: 'inside'
                                }
                            ],
                            series: [
                                { // For shadow
                                    type: 'bar',
                                    itemStyle: {
                                        color: 'rgba(0,0,0,0.05)'
                                    },
                                    barGap: '-100%',
                                    barCategoryGap: '40%',
                                    data: dataShadow,
                                    animation: false
                                },
                                {
                                    type: 'bar',
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 0, 1,
                                            [
                                                {offset: 0, color: '#0efdff'},
                                                {offset: 0.5, color: '#188df0'},
                                                {offset: 1, color: '#188df0'}
                                            ]
                                        )
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(
                                                0, 0, 0, 1,
                                                [
                                                    {offset: 0, color: '#2378f7'},
                                                    {offset: 0.7, color: '#2378f7'},
                                                    {offset: 1, color: '#0efdff'}
                                                ]
                                            )
                                        }
                                    },
                                    data: data
                                }
                            ]
                        };

                        // Enable data zoom when user click bar.
                        /*var zoomSize = 6;
                        myChart.on('click', function (params) {
                            console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                            myChart.dispatchAction({
                                type: 'dataZoom',
                                startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                                endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                            });
                        });*/

                        //获取dom容器
                        var myChart = echarts.init(document.getElementById('chartmain'));
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        //};
                    </script>
                    <span class="border_bg_leftTop"></span>
                    <span class="border_bg_rightTop"></span>
                    <span class="border_bg_leftBottom"></span>
                    <span class="border_bg_rightBottom"></span>
                </div>
            </div>
            <div class="leftMain_middle_right">
                <div class="leftMain_middle_rightIn">
                    <h3>游客来源分类</h3>
                    <div class="biaoge biaoge_pai" id ="biaoge biaoge_pai" style="width:100%; height:25vh">
                    </div>
                    <span class="border_bg_leftTop"></span>
                    <span class="border_bg_rightTop"></span>
                    <span class="border_bg_leftBottom"></span>
                    <span class="border_bg_rightBottom"></span>
                </div>
            </div>
        </div>
        <div class="leftMain_middle">
            <div class="leftMain_middle_left">
                <div class="leftMain_middle_leftIn">
                    <h3>近年旅游额对比</h3>
                    <div class="biaoge" style="width:100%; height:25vh" id="chartmain_zhe"></div>
                    <script type="text/javascript">
                        //window.onload = function (){
                        //指定图表的配置项和数据

                        option = {
                            title: {
                                text: ''
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12,
                                },
                                right: '10%',
                                data: ['2021', '2022']
                            },
                            grid: {
                                x: 40,
                                y: 40,
                                x2: 20,
                                y2: 20,
                            },
                            toolbox: {
                                feature: {
                                    //saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                axisLabel: {
                                    /*inside: true,*/
                                    interval: 0,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12

                                    }
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    symbol: ['none', 'arrow'],
                                    symbolOffset: 12,
                                    lineStyle: {
                                        color: '#fff',
                                    }
                                },
                                data: ['1月', '3月', '5月', '7月', '9月', '11月']
                            },
                            yAxis: {
                                type: 'value',
                                name: '单位：万',
                                axisLine: {
                                    show: true,
                                    symbol: ['none', 'arrow'],
                                    symbolOffset: 12,
                                    lineStyle: {
                                        color: '#fff',
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: 12
                                    }
                                }
                            },
                            series: [
                                {
                                    name: '2021',
                                    type: 'line',
                                    stack: '总量',
                                    data: [280, 102, 191, 234, 390, 110],
                                    itemStyle: {
                                        normal: {
                                            color: "#0efdff",//折线点的颜色
                                            lineStyle: {
                                                color: "#0efdff",//折线的颜色
                                                width: 2,
                                            }
                                        },
                                    }
                                },
                                {
                                    name: '2022',
                                    type: 'line',
                                    stack: '总量',
                                    data: [100, 132, 131, 264, 690, 200]
                                },
                            ]
                        };
                        //获取dom容器
                        var myChart = echarts.init(document.getElementById('chartmain_zhe'));
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        //};
                    </script>
                    <span class="border_bg_leftTop"></span>
                    <span class="border_bg_rightTop"></span>
                    <span class="border_bg_leftBottom"></span>
                    <span class="border_bg_rightBottom"></span>
                </div>
            </div>
            <div class="leftMain_middle_right">
                <div class="leftMain_middle_rightIn">
                    <h3>旅游数据总览</h3>
                    <div class="biaoge biaoge_bi" style="width:100%; height:25vh">
                        <ul>
                            <li>
                                <div class="liIn">
                                    <p class="shu shu1">23</p>
                                    <p class="zi">今年旅游比例</p>
                                </div>
                            </li>
                            <li>
                                <div class="liIn">
                                    <p class="shu shu2">2599</p>
                                    <p class="zi">今年旅游额</p>
                                </div>
                            </li>
                            <li>
                                <div class="liIn">
                                    <p class="shu shu3">105.9</p>
                                    <p class="zi">较增长</p>
                                </div>
                            </li>
                            <li>
                                <div class="liIn">
                                    <p class="shu shu4">31.4</p>
                                    <p class="zi">本季收益比例</p>
                                </div>
                            </li>
                            <li>
                                <div class="liIn">
                                    <p class="shu shu5">21.5</p>
                                    <p class="zi">本季度总增长</p>
                                </div>
                            </li>
                            <li>
                                <div class="liIn">
                                    <p class="shu shu6">2.3</p>
                                    <p class="zi">同比增长点</p>
                                </div>
                            </li>
                        </ul>

                    </div>
                    <span class="border_bg_leftTop"></span>
                    <span class="border_bg_rightTop"></span>
                    <span class="border_bg_leftBottom"></span>
                    <span class="border_bg_rightBottom"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="rightMain">
        <div class="rightMain_top">
            <div class="rightMain_topIn">
                <h3>旅游文化热题分类</h3>
                <div class="biaoge" style="width:100%; height:30vh" id="chartmain_bing"></div>
                <script type="text/javascript">
                    option = {
                        title: {
                            text: '数据情况统计',
                            subtext: '',
                            left: 'right',
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            // orient: 'vertical',
                            // top: 'middle',
                            type: 'scroll',
                            orient: 'vertical',
                            right: 10,
                            top: 40,
                            bottom: 20,
                            left: 'right',
                            data: ['美食', '历史', '山水', '文化', '故里'],
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }

                        },
                        grid: {
                            x: '-10%',
                            y: 40,
                            x2: 20,
                            y2: 20,
                        },
                        color: ['#09d0fb', '#f88cfb', '#95f8fe', '#9390f9', '#FF00FF'],
                        series: [
                            {
                                type: 'pie',
                                radius: '65%',
                                center: ['50%', '50%'],
                                selectedMode: 'single',
                                data: [
                                    {
                                        value: 1548, name: '美食打卡',

                                    },
                                    {value: 535, name: '历史细嗅'},
                                    {value: 510, name: '游山玩水'},
                                    {value: 634, name: '体验文化'},
                                    {value: 735, name: '回望故里'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    //获取dom容器
                    var myChart = echarts.init(document.getElementById('chartmain_bing'));
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                </script>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
            </div>
        </div>
        <div class="rightMain_bottom">
            <div class="rightMain_bottomIn">
                <h3>旅游热地动态排行</h3>
                <div class="biaoge biaoge_list" style="width:100%; height:36vh">
                    <div class="biaoge_listIn">
                        <ul class="ul_title">
                            <li style = "color:#46ced3">景区名</li>
                            <li style = "color:#46ced3">评分</li>
                            <li style = "color:#46ced3">所在地</li>
                            <li style = "color:#46ced3">旅游人次/万</li>
                        </ul>
                        <div class="ul_list">
                            <div class="ul_listIn">
                                <ul class="ul_con">
                                    <li>丽江</li>
                                    <li>9.7</li>
                                    <li>江西</li>
                                    <li>782.4</li>

                                </ul>
                                <ul class="ul_con">
                                    <li>三亚</li>
                                    <li>9.2</li>
                                    <li>海南</li>
                                    <li>1204.3</li>

                                </ul>
                                <ul class="ul_con">
                                    <li>黄山</li>
                                    <li>9.0</li>
                                    <li>安徽</li>
                                    <li>625.1</li>

                                </ul>
                                <ul class="ul_con">
                                    <li>九寨沟</li>
                                    <li>8.9</li>
                                    <li>四川</li>
                                    <li>723.8</li>

                                </ul>
                                <ul class="ul_con">
                                    <li>桂林</li>
                                    <li>8.9</li>
                                    <li>广西</li>
                                    <li>718.1</li>

                                </ul>
                                <ul class="ul_con">
                                    <li>鼓浪屿</li>
                                    <li>8.5</li>
                                    <li>厦门</li>
                                    <li>629.3</li>

                                </ul>
                                <ul class="ul_con">
                                    <li>长城</li>
                                    <li>8.3</li>
                                    <li>北京</li>
                                    <li>1230.5</li>

                                </ul>
                                <ul class="ul_con">
                                    <li>张家界</li>
                                    <li>8.2</li>
                                    <li>湖南</li>
                                    <li>682.5</li>

                                </ul>
                                <ul class="ul_con">
                                    <li>布拉达宫</li>
                                    <li>8.0</li>
                                    <li>西藏</li>
                                    <li>928.4</li>

                                </ul>
                                <ul class="ul_con">
                                    <li>西湖</li>
                                    <li>8.0</li>
                                    <li>江苏</li>
                                    <li>769.9</li>

                                </ul>
                                <ul class="ul_con">
                                    <li>武功山</li>
                                    <li>8.0</li>
                                    <li>江西</li>
                                    <li>720.5</li>

                                </ul>
                                <ul class="ul_con">
                                    <li>凤凰古城</li>
                                    <li>7.9</li>
                                    <li>湖南</li>
                                    <li>685.2</li>

                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
<!--大屏-->
<!--数字增长累加动画-->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $(".shu1").numScroll();
    $(".shu2").numScroll();
    $(".shu3").numScroll();
    $(".shu4").numScroll();
    $(".shu5").numScroll();
    $(".shu6").numScroll();

    /*$(".num2").numScroll({
        time:5000
    });*/
</script>
<script src="js/china.js"></script>
<script src="js/overview.js"></script>
</script>


<!--大屏-->
</body>
</html>
